<!--
 * @Author: xiaobaobeibai 604070135@qq.com
 * @Date: 2021-09-22 08:15:54
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-03-15 16:58:23
 * @FilePath: /huizhou-management-end/src/views/login/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="login-bg">
    <el-card class="box-card">
      <div slot="header">
        <div
          class="text-center">
          欢迎登录官网管理系统
        </div>
      </div>
      <div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules">
          <el-form-item
            prop="name">
            <el-input
              v-model="loginForm.name"
              placeholder="请输入账号"
              prefix-icon="el-icon-document" />
          </el-form-item>
          <el-form-item
            prop="password">
            <el-input
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock">
              <i slot="suffix"
                class="el-input__icon el-icon-view"
                @click="showPwd" />
            </el-input>
          </el-form-item>
          <el-form-item
            prop="code">
            <div
              style="display:flex">
              <el-input
                v-model="loginForm.code"
                style="width:220px"
                prefix-icon="el-icon-edit-outline"
                placeholder="请输入验证码" />
              <div
                style="border-radius:0 4px 4px 0;overflow: hidden;height:40px;">
                <CodeImg
                  ref="codeImg"
                  :input-code="loginForm.code"
                  @success="success" />
              </div>
            </div>
          </el-form-item>
          <el-button
            v-loading="loading"
            type="primary"
            style="width:100%"
            @click="handleLogin()">登录</el-button>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { REQUEST_LIST } from '@/api/requestList'
import CodeImg from '../../components/codeImg/Codeimg.vue'
export default {
  name: 'Login',
  components: { CodeImg },
  data() {
    return {
      loginForm: {
        name: '', // fjmxjt
        code: '',
        password: '' // fjmxjt666888
      },
      loginRules: {
        name: [{ required: true, trigger: 'blur', message: '请输入账号' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
        code: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
      },

      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = 'text'
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    success(data) {
      if (data === 1) {
        REQUEST_LIST.REQUST_FCN(
          'LOGIN',
          {
            password: this.loginForm.password,
            name: this.loginForm.name
          },
          true
        ).then(res => {
          this.loading = false
          if (res.status == 200) {
            this.$message.success('登录成功！')
            window.localStorage.setItem('loginId', res.data.id)
            window.localStorage.setItem('token', this.loginForm.code)
            window.localStorage.setItem('account', res.data.name)
            window.localStorage.setItem('password', this.loginForm.password)
            this.$router.push({ path: '/' })
          } else if (res.status == 1) {
            this.$message.error('账号或者密码错误！')
          }
        })
      } else {
        this.loading = false
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$refs.codeImg.matching()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* reset element-ui css */

.login-bg {
  display: flex;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: url('http://www.fjmxjt.cn/admin/img/351.976f05dc.jpg') no-repeat;
  background-size: 100% 100%;
  align-items: center;
  flex-flow: column;
  .box-card {
    width: 360px;
  }
}
</style>
